<template>
  <div class="search-module">
    <div class="header-R">
      <el-input
        ref="input"
        prefix-icon="el-icon-search"
        class="custom-input search-input-width"
        v-model="keyword"
        placeholder="搜索"
        size="mini"
        :disabled="disabled"
        @input="handleSearch"
        @focus="handleFocus"
        @blur="handleBlur"
      >
        <span
          @click.prevent="handleClear"
          v-if="clearFlag"
          slot="suffix"
          class="clear"
        >
          <i class="el-icon-close"></i>
        </span>
      </el-input>
      <el-dropdown
        placement="bottom-start"
        trigger="click"
        @command="handleCommand"
      >
        <el-button>
          <span class="setting-icon-bold el-icon-setting"></span>
        </el-button>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item command="addFriend" icon="el-icon-s-custom">
            添加好友
          </el-dropdown-item>
          <el-dropdown-item command="addGroup" icon="el-icon-s-tools">
            设置中心
          </el-dropdown-item>
          <el-dropdown-item command="buildGroupChat" icon="el-icon-s-promotion">
            发起群聊
          </el-dropdown-item>
          <el-dropdown-item command="tagFriends" icon="el-icon-refresh">
            <template v-if="showSwitching === '0'">
              <span @click.prevent="switchShow('1')">全部展示</span>
            </template>
            <template v-if="showSwitching === '1'">
              <span @click.prevent="switchShow('0')">分组展示</span>
            </template>
          </el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
  </div>
</template>

<script>
// 引入防抖节流工具
import { createDebounce, createThrottle } from '@/utils/debounceThrottle';

export default {
  name: 'SearchModule',
  props: {
    disabled: {
      type: Boolean,
      default: false
    },
    showSwitching: {
      type: String,
      default: '0'
    }
  },
  data() {
    return {
      keyword: '',
      clearFlag: false
    };
  },
  methods: {
    handleSearch() {
      this.performSearch();
    },
    
    handleFocus() {
      this.clearFlag = true;
      this.updateSearchStatus(this.clearFlag);
      this.$emit('focus');
      this.performSearch();
    },
    
    handleBlur() {
      if (this.clearFlag) {
        this.focusInput();
        return;
      }
      this.clearInput();
      this.updateSearchStatus(this.clearFlag);
      this.$emit('blur');
    },
    
    handleClear() {
      this.clearFlag = false;
      this.blurInput();
      this.$emit('clear');
    },
    
    handleCommand(command) {
      this.$emit('command', command);
    },
    
    switchShow(showSwitching) {
      this.$emit('switch-show', showSwitching);
    },
    
    // 输入框操作方法
    focusInput() {
      if (this.$refs.input) {
        this.$refs.input.focus();
      }
    },
    
    clearInput() {
      if (this.$refs.input) {
        this.$refs.input.clear();
      }
    },
    
    blurInput() {
      if (this.$refs.input) {
        this.$refs.input.blur();
      }
    },
    
    // 更新搜索状态
    updateSearchStatus(isSearching) {
      this.$store.dispatch('chatList/setSearchStatus', isSearching);
    },
    
    // 防抖搜索方法
    performSearch: createDebounce(function() {
      try {
        if (this.keyword.trim()) {
          this.$store.dispatch('chatList/searchChats', this.keyword);
        } else {
          this.$store.dispatch('chatList/clearSearch');
        }
        this.$emit('search', this.keyword);
      } catch (error) {
        this.$notify({
          title: '搜索失败',
          message: '请稍后重试',
          type: 'error'
        });
      }
    }, 300, { immediate: false }),
    
    // 完成搜索
    completeSearch() {
      this.clearFlag = false;
      this.keyword = '';
      this.blurInput();
      this.updateSearchStatus(false);
      // 不触发clear事件，避免递归调用
    }
  }
};
</script>

<style scoped>
.search-module {
  width: 100%;
}

.header-R {
  line-height: 50px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

::v-deep .header-R .el-button {
  margin-left: 10px;
  padding: 5px 5px;
  background-color: #f3f3f3;
}

::v-deep .header-R .el-input__inner {
  background-color: #f3f3f3;
}

::v-deep .header-R .el-input__inner:focus {
  border-color: #f3f3f3;
}

.clear {
  background-color: #d1d1d1;
  cursor: pointer;
  color: #999999;
  font-weight: bold;
  border-radius: 50%;
  padding: 1px;
}

.clear:hover {
  color: #7e7e7e;
}

.search-input-width {
  width: 85%;
}

.setting-icon-bold {
  font-weight: bold;
}
</style>
